<script lang="ts" setup>
import { ref } from 'vue'

const merchantId = ref('546342343234')
const device = ref('sa1234')
const account = ref('13245678901')
const phone = ref('')
const content = ref('')
const labelWidth = '135rpx'
</script>

<template>
  <view>
    <view class="advice-box">
      <view class="advice-title">
        投诉 / 建议
      </view>
      <view class="advice-content">
        <view class="a-row">
          <wd-input v-model="merchantId" type="text" label="商家编号：" readonly :label-width="labelWidth" />
        </view>
        <view class="a-row">
          <wd-input v-model="device" type="text" label="设备编号：" readonly :label-width="labelWidth" />
        </view>
        <view class="a-row">
          <wd-input v-model="account" type="text" label="我的账号：" readonly :label-width="labelWidth" />
        </view>
        <view class="a-row">
          <wd-input v-model="phone" type="text" label="我的电话：" inputmode="tel" :label-width="labelWidth" placeholder="请输入手机号" />
        </view>
        <view class="a-row">
          <wd-textarea v-model="content" class="h-200rpx" label="投诉内容：" :label-width="labelWidth" :maxlength="300" clearable show-word-limit placeholder="反馈您的问题，或对商家建议" />
        </view>
      </view>
    </view>
    <view class="advice-btn">
      <wd-button custom-class="custom-shadow" block>
        主要按钮
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
:deep(){
  .custom-shadow {
    font-size: 28rpx !important;
      box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
      background-color: #07c160 !important;
    }
    wx-textarea {
        height: 130rpx;
    }
}
.advice-box {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 0 30rpx;
  box-sizing: border-box;
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}
.advice-title {
  width: 100%;
  height: 100rpx;
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 100rpx;
  text-align: center;
}
.advice-content {
  font-size: 28rpx;
  font-size: 24rpx;
  padding: 20rpx;
  .a-row {
    border-bottom: 1px solid #ececec;
  }
}
.advice-btn{
  width: 70%;
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}
</style>
